<script setup>
import { reactive, ref, nextTick, onMounted } from 'vue'
import { updateNewsItem } from '../api/news'
import { ElMessage } from 'element-plus'
import { classList } from '../enums'
// 定义props接收待发布新闻列表
const props = defineProps({
  pendingNews: {
    type: Array,
    default: () => [],
  },
})

// 定义emits
const emit = defineEmits(['remove-news', 'edit-news', 'publish-settings'])

// 处理移除新闻
const handleRemove = async (id) => {
  const res = await updateNewsItem({ id, isSelect: 0 })
  if (res.code === 200) {
    ElMessage.success('移除成功')
    // 触发父组件的remove-news事件
    emit('remove-news', id)
  }
}
// 处理编辑新闻
const handleEdit = (news) => {
  emit('edit-news', news)
}

const getClassLabel = (value) => {
  const classItem = classList.find((item) => item.value === Number(value))
  return classItem ? classItem.label : value
}
// 根据分类值获取分类颜色
const getClassColor = (value) => {
  const classItem = classList.find((item) => item.value === Number(value))
  return classItem ? classItem.color : '#909399'
}

</script>

<template>
  <div v-if="pendingNews.length === 0" class="empty-state">
    <p>暂无待发布新闻</p>
  </div>
  <div v-else v-for="news in pendingNews" :key="news.id" class="wait-news-box">
    <div class="news-category">
      <span :style="{backgroundColor: getClassColor(news.classReal),color: '#fff'}">{{ getClassLabel(news.classReal) }}</span>
    </div>
    <div class="news-title">
      <h4>{{ news.newsTitle }}</h4>
    </div>
    <div class="news-summry">
      <p>{{ news.abstractReal }}</p>
    </div>
    <div class="news-source">
      <span>{{ news.newsSource }}</span>
    </div>
    <div class="news-footer">
      <div class="author">
        <span>由{{ news.opPerson }}添加</span>
      </div>
      <div class="actions">
        <div class="action-btn" v-permission="'write'" >
          <img src="../assets/btn-remove.svg" alt="" />
          <el-popconfirm title="确定移除此新闻吗?" placement="top" @confirm="handleRemove(news.id)">
            <template #reference>
              <el-button>移除</el-button>
            </template>
          </el-popconfirm>
        </div>
        <div class="action-btn" @click="handleEdit(news)" v-permission="'write'">
          <img src="../assets/btn-edit.svg" alt="" />
          <button>编辑</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wait-news-box {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 15px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wait-news-box:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.news-category {
  margin-bottom: 10px;
}

.news-category span {
  background-color: #f0f0f0;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #555;
}

.news-title {
  margin-bottom: 12px;
}

.news-title h4 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.news-summry {
  margin-bottom: 12px;
}

.news-summry p {
  margin: 0;
  font-size: 15px;
  color: #666;
  line-height: 1.5;
}

.news-source {
  margin-bottom: 15px;
}

.news-source span {
  font-size: 14px;
  color: #888;
}

.news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.author span {
  font-size: 13px;
  color: #999;
}

.actions {
  display: flex;
  gap: 15px;
}

.action-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.action-btn img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.action-btn span,
.action-btn button {
  font-size: 14px;
  color: #555;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #999;
  font-size: 16px;
}

.Published-box {
  display: flex;
  flex-direction: column;
  width: 315px;
  /* height: 540px; */
}

.Published-box p,
.Published-box span {
  color: #a8a8a8;
}
</style>
